一開始做素材的時候,就畫了橫向卷軸類型的畫面,邊寫PIXI邊想下一篇要寫甚麼,第八天了我有點累了快沒梗了怎麼辦(抓頭

本篇貌似跟PIXI沒啥關係,但我們是來做遊戲的咩就讓我來寫一下鍵盤控制吧!!

素材背景延續使用 上一篇Day7 ,
腳色延續 Day5 連續動圖spriteSheet 使用loader json載入

因為要移動,所以增加一個參數去紀錄移動多少

anim.vx = 0;
anim.vy = 0;

並在ticker設定,讓會跟著動的物件都加上vx值移動

app.ticker.add(delta => {
  anim.x += anim.vx;
  mountTiling.tilePosition.x -= anim.vx/4;
  groundTiling.tilePosition.x -= anim.vx/2;
  cloudTiling.tilePosition.x -= 0.5;
});

偵聽鍵盤事件

window.addEventListener( "keydown", downHandler);
window.addEventListener("keyup", upHandler);

 function downHandler(e){
    if(e.keyCode === 37) {
      // left
      anim.vx -= 5;
      anim.play(); // 移動時播放動畫
    }
    if(e.keyCode === 39) {
      // right
      anim.vx += 5;
      anim.play();
    }
  }
  function upHandler(e){
      anim.vx = 0;
      anim.stop(); 停止移動時停止動畫
  }

一個簡易版的左右移動,高級版可參考 官方範例